<template>
	<view class="order-list">
		<view class='title-list'>
			<view :class="current == -1 ? 'current': ''" @click="clickTitle(-1)">全部订单</view>
			<view :class="current == 0 ? 'current': ''" @click="clickTitle(0)">审核中</view>
			<view :class="current == 1 ? 'current': ''" @click="clickTitle(1)">审核通过</view>
			<view :class="current == 2 ? 'current': ''" @click="clickTitle(2)">审核不通过</view>
			<view class='line' :style="'left: ' + positionLeft[current + 1]"></view>
		</view>
		<view class='list-box'>
			<scroll-view :style="'height:'+windowHeight + 'rpx'" scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower">
				<view class="scroll-view-item">
					<view class='list-item' v-for='item in dataList' :key='item.id'>
						<view class="item-head">
							<text class="text_3">{{item.statusTime}}</text>
							<text class="text_4">{{getStatusText(item.status)}}</text>
						</view>
						
						<view class="item-content">
							<image class="img-left" style="width: 160rpx;height: 160rpx;" :src="item.cover||'https://dnsverify.pfmoto.com/appstatic/img/my/appoint_img_small.png'" />
							<view class="activity-view-info" style="margin-left: 20rpx;">
								<text class="text_3">{{item.title}}</text>
						
								<view class="row">
									<text style="padding-right: 20rpx;">{{item.isOfficial==1?'官方活动':'用户活动'}}</text>
									<!-- 骑行活动 -->
									<image v-if="item.activityType=='骑行活动'" class="activityType" style="width: 122rpx;height: 40rpx;" src="https://dnsverify.pfmoto.com/appstatic/community/text_activity_cycle.png"></image>
									<!-- 报名活动 -->
									<image v-else class="activityType" style="width: 122rpx;height: 40rpx;" src="https://dnsverify.pfmoto.com/appstatic/community/text_activity_signup.png"></image>
								</view>
							</view>
						</view>
						
						<view class='item-btn'>
							<view class='btn-date'>积分{{item.doorsillScore}}</view>
							<view class='btn-pay'  @click='gotoDetail(item)'>查看详情</view>
						</view>
					</view>
				</view>
				<view v-if="params.pageEnd && dataList.length" class="end">全部加载完毕</view>
				<!-- <empty v-if='!dataList.length' text='暂无订单数据' /> -->
			</scroll-view>
		</view>
	</view>

</template>

<script>
	const app = getApp();
	import empty from '@components/empty/empty.vue'
	const util = require('@utils/util.js');
	const network = require('@manager/network-manager.js');
	const dialog = require('@utils/dialog.js');
	export default {
		components: {
			empty
		},
		data() {
			return {
				current: -1,
				windowHeight: 0,
				dataList: [],
				positionLeft: ['9.5%', '31%', '55%', '75.5%', '90.5%'],
				params: {
					pageNum: 1,
					pageSize: 5,
					pageEnd: false
				},
				
				warnShow: false,
				toPayItem: null,
				statusList: [{
						text: '审核中',
						value: 0
					},
					{
						text: '审核通过',
						value: 1
					}, // 定金已支付
					{
						text: '审核不通过',
						value: 2
					},
				],
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			var that = this
			uni.getSystemInfo({
				success: function(res) {
					console.log(res, 'getSystemInfo');
					let clientHeight = res.windowHeight - 44;
					let clientWidth = res.windowWidth;
					let ratio = 750 / clientWidth; //计算为百分比
					let rpxHeight = ratio * clientHeight;
					that.windowHeight = rpxHeight;
					console.log('rpxHeight', rpxHeight)
					that.navigationBarHeight = res.statusBarHeight + 'px'

				}
			})
		},
		onShow: function() {
			this.getList(1, this.current)
		},
		methods: {
			getStatusText(value) {
				let text = null
				this.statusList.forEach(item => {
					if (item.value == value) {
						text = item.text
					}
				})
				return text
			},
			scrolltolower() {
				console.log('scrolltolower')
				this.getList(this.params.pageNum, this.current)
			},
			getList(pageNum, status) {
				if (pageNum == 1) {
					this.dataList = [];
					this.params.pageNum = 1;
					this.params.pageEnd = false
				}
				let url = app.globalData.config.interfaces.URL_APP_GETPARTYSIGNPAGE
				
				if(status < 0){
					var params = {
						"pageNum": pageNum,
						"pageSize": this.params.pageSize,
						"loginId": app.globalData.userInfo.id,
					};
				}else{
					var params = {
						"pageNum": pageNum,
						"pageSize": this.params.pageSize,
						"loginId": app.globalData.userInfo.id,
						"status": status 
					};
				}
				
				if (this.params.pageEnd) return
				network.get(url, params, 'form').then(res => {
					if (res.code == 200) {
						this.dataList = this.dataList.concat(res.data.list)
						if (!res.data.list.length) {
							this.params.pageEnd = true;
							return
						}
						this.params.pageNum++
					}
				})
			},
			//切换tab
			clickTitle(current) {
				if (current == this.current) return
				this.current = current
				this.getList(1, current)
			},
			gotoDetail(item) {
				uni.navigateTo({
					url: `/module_my/pages/activityDetail/activityDetail?id=` + item.id
				});
			},
		},
	}
</script>

<style>
	@import "./activityList.css";
	.item-head {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.item-content {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-direction: row;
		height: 210rpx;
		/* width: 750rpx; */
	}
	.img-left {
		width: 160rpx;
		height: 160rpx;
		border-top-left-radius: 2px;
		border-bottom-left-radius: 2px;
	}
	.activity-view-info {
		width: 506rpx;
		height: 160rpx;
		display: flex;
		flex-direction: column;
		align-content: space-between;
	}
	.text_3 {
		font-weight: 400;
		font-size: 28rpx;
		line-height: 40rpx;
		display: flex;
		color: #000000;
	}
	.text_4 {
		font-weight: 700;
		font-size: 28rpx;
		line-height: 40rpx;
		display: flex;
		color: #EA5404;
	}
	.row {
		display: flex;
		align-items: center;
		flex-direction: row;
		
	}
	.activityType {
		width: 122rpx;
		height: 40rpx;
		padding-right: 10rpx;
	}
</style>
